<!-- <template>
    <div class="live">
    
        <el-drawer class="sorrty" v-model="table" :with-header="false" title="Please enjoy some diverse CSS animations!"
            direction="ltr" size="30%">
          
            <div class="love">
                <div v-for="(item, index) in drawData" :key="index" class="qspan">
                    <div class="animation" v-for="(animate, index) in item.children" :ref="animate.value" :key="index"
                        @mouseenter="Runanimate(animate)" @click="AddRunanimate(animate)"> {{ animate.label }}</div>
                </div>
            </div>
        </el-drawer>

        <el-button type="success" @click="addtable">添加动画</el-button>
        <el-button type="primary" @click="livetable">预览动画</el-button>
    </div>

</template>

<script lang="ts" setup>
import { getCurrentInstance, reactive, ref } from 'vue'
import { useComponents } from '@/stores/counter'

import { ElDrawer, ElMessageBox } from 'element-plus'
import drawData from '@/utils/Animate'//引入CSS动画数据库
import { storeToRefs } from 'pinia';
console.log(drawData, "XXXXXXXXXXXXXXXXXXX");
const { table, currentcom } = storeToRefs(useComponents())
const {setIsanimate,SetanimationeventsForthecurrentcomponent,setStyle} = useComponents()
//添加anniu动画pina
const addtable = () => {
    setIsanimate(true)
}
//点击预览aniniu动画
const livetable = () => {
    //gei当前组件设置样式
    setStyle(
        currentcom.value.id,
        'animation',
        `${currentcom.value.animate.value}${currentcom.value.animate.animationTime}s`
    )
    setTimeout(() => {
        //取消当前组件的样式
        setStyle(currentcom.value.id, 'animation', '')
    }, currentcom.value.animate.animationTime * 1000);
}
//默认显示进入
// var antions=ref("进入")
const { proxy }: any = getCurrentInstance()
//运行动画
const Runanimate = (animate: any) => {
    proxy.$refs[animate.value].forEach((tag: HTMLDivElement) => {
        console.log(proxy.$refs, "xxxeeee");

       tag.style.animation = animate.value + '' + animate.animationTime + 's'
        //情况/空动画
        setTimeout(() => {
            tag.style.animation = ''
        }, 1700)
    })
}
//开始添加单个动画
const AddRunanimate = (animate: any) => {
    SetanimationeventsForthecurrentcomponent(animate)
    setIsanimate(false)
}

// const table = ref(false)
</script>
<style scoped lang="scss">
.live {
    width: 100%;
    height: 100%;
    // background: red;
}

.leftBtn {
    padding-left: 15px;

    button {
        width: 152px;
        height: 66px;
    }
}

.sorrty {
    width: 100%;
    height: 100%;
    background: red;
}

.love {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // background: pink;
    justify-content: space-around;
    /* 或 space-between, space-evenly 等 */
    align-items: center;
    /* 如果需要垂直居中整个 span（但通常不需要） */
    padding: 10px;
    /* 为大盒子添加内边距 */

    .qspan {
        flex-basis: calc(30% - 14px);
        /* 30% 宽度减去两边的 margin */
        max-width: calc(30% - 14px);
        /* 确保即使内容很多也不会撑破 */
        margin: 0 5px;
        /* 左右各 5px 间距，总共 10px */
        text-align: center;
        /* 文字居中 */
        border: 1px solid black;
        /* 黑色边框 */
        box-sizing: border-box;
        /* 包括边框和内边距在内 */
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        font-weight: normal;
        margin-top: .6rem;
    }
}
</style> -->
<template>
    <div class="dh">
        <el-drawer v-model="table" direction="ltr" :width-header="false">
            <div v-for="(item, index) in AnimateList" :key="index" class="eeegg">
                <div v-for="(animate, index) in item.children" :ref="animate.value" :key="index" class="animation"
                    @mouseenter="RingAnimation(animate)" @click="AddsAnimation(animate)">
                    {{ animate.label }}
                </div>
            </div>
        </el-drawer>
        <el-button class="elbtn" type="warning" @click="HandAdd">添加动画</el-button>
        <el-button class="elbtn" type="warning" @click="HandLive">预览动画</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import AnimateList from '@/utils/Animate.ts'
//引入仓库
import { useComponents } from '@/stores/counter.ts'
import { storeToRefs } from 'pinia'
const { table, currentcom } = storeToRefs(useComponents())
const { setIsanimate, SetanimationeventsForthecurrentcomponent, setStyle } = useComponents()
//添加动画
const HandAdd = () => {
    setIsanimate(true)
}
//点击预览动画按钮
const HandLive = () => {
    //给当前组件设置的animate样式
    setStyle(
        currentcom.value.id,
        'animation',
        `${currentcom.value.animate.value} ${currentcom.value.animate.animationTime}s`
    )
    setTimeout(() => {
        //取消当前组件的animation样式
        setStyle(currentcom.value.id, 'animation', '')
    }, currentcom.value.animate.animationTime * 1000)
}
//默认显示进入
const animateName = ref('进入')
const { proxy }: any = getCurrentInstance()
//运行动画
const RingAnimation = (animate: any) => {
    proxy.$refs[animate.value].forEach((tag: HTMLDivElement) => {
        tag.style.animation = animate.value + ' ' + animate.animationTime + 's'
        //清空动画
        setTimeout(() => {
            tag.style.animation = ''
        }, 1500)
    })
}
//添加动画
const AddsAnimation = (animate: any) => {
    SetanimationeventsForthecurrentcomponent(animate)
    setIsanimate(false)
}
</script>

<style scoped>
.animation {
    border: 1px solid #000;
    border-radius: 0.5rem;
    text-align: center;
    line-height: .6rem;
    background: pink;
    color: #000;
    width: 25%;
    float: left;
    margin-top: .5rem;
    margin-left: .2rem;
    text-align: center;
    cursor: pointer;
    font-weight: normal;
    font-size: 22px;
    justify-content: space-around;
    white-space: nowrap;
    /* 不换行 */
    overflow: hidden;
    /* 溢出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */

}

.elbtn {
    width: 180px;
    height: 50px;
    font-size: 22px;
    margin: 2%;
    margin-left: .2rem;
}
</style>